<template>
  <div class = "whole">
    <el-header class="index-header">
        <navcon></navcon>
      </el-header>
  <div class = "content">
    <div>
      <el-aside>
      <leftnav1 class="showclass"></leftnav1>
    </el-aside>
    </div>
    <!-- 面包屑导航 -->
    <div class="detail">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item >服装类库存</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-row>
        <el-col>
            <div>
                <el-form :inline="true" class="user-search">
                    <el-form-item style="float: left" label="查询商品名称:">
                        <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
                    </el-form-item>  
                    <!-- <el-form-item style="float: right">
                        <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="handleEdit()">上新</el-button>
                    </el-form-item> -->
                </el-form>
            </div>
    <!--列表-->
            <div>
                <el-table size="small" class="table" style="float: left" :data="searchUserinfo(keyUser)" border>
                    <el-table-column
                      type="index"
                      label="序号"
                      align="center"
                      width="60">
                    </el-table-column>
                    <el-table-column
                      label="商品编号"
                      align="center"
                      width="100">
                      <template slot-scope="scope" >
                        <span>{{ scope.row.gid}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="商品名称"
                      align="center"
                      width="100">
                      <template slot-scope="scope">
                        <span>{{ scope.row.gname }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="品牌"
                      align="center"
                      width="140">
                      <template slot-scope="scope">
                        <span>{{scope.row.brand }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="颜色"
                      align="center"
                      width="160">
                      <template slot-scope="scope">
                        <span>{{scope.row.color }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="大小"
                      align="center"
                      width="180">
                      <template slot-scope="scope">
                        <span>{{ scope.row.size }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="适合人群"
                      align="center"
                      width="160">
                      <template slot-scope="scope">
                        <span>{{ scope.row.crowd }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="价格"
                      align="center"
                      width="130">
                      <template slot-scope="scope">
                        <span>{{ scope.row.price }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="数量"
                      align="center"
                      width="100">
                      <template slot-scope="scope">
                        <span>{{scope.row.count }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align = "center" width="150">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)">下架</el-button>
                      <!-- <el-button
                          size="mini"
                          type="danger"
                          @click="handleEdit(scope.$index, scope.row)">进货</el-button> -->
                      </template>
                    </el-table-column>
                  </el-table>
            </div>
        </el-col>
    </el-row>
    </div>
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
      <el-form label-width="80px" ref="editForm" :model="editForm" >
        <el-form-item label="商品编号" prop="gid">
          <el-input v-model="editForm.gid"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="gname">
          <el-input v-model="editForm.gname"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="editForm.brand"></el-input>
        </el-form-item>
        <el-form-item label="颜色" prop="color">
          <el-input v-model="editForm.color"></el-input>
        </el-form-item>
        <el-form-item label="大小" prop="size">
          <el-input v-model="editForm.size"></el-input>
        </el-form-item>
        <el-form-item label="适合人群" prop="crowd">
          <el-input v-model="editForm.crowd"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input v-model="editForm.count"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm( editForm )">保存</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
  </template>

<script>
import navcon from '../../components/navcon.vue'
import leftnav1 from '../../components/leftnav1.vue' 
export default {
  // productName: 'info',
  data () {
    return {
      number:'',
      editFormVisible: false, //控制编辑页面显示与隐藏
      tableData:[],
      keyUser:"",
      editForm:{    //编辑信息
        gid:'',
        gname:'',
        brand:'',
        color:'',
        size:'',
        crowd:'',
        price:'',
        count:''
      },
    }
  },
  components: {
    navcon,
    leftnav1
  }, 
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getUserInfo()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getUserInfo() {
        this.$axios.get('http://172.23.241.44:8080/admin/goods/list?typeid=1').then(res => {
          this.tableData = res.data.list
            console.log(this.tableData)
        })
    },

    handleDelete(index, row) {      
      this.$axios.post('http://172.23.241.44:8080/admin/undercarriage/goods/gid?gid='+row.gid+'&reason="123"',{
    })
    this.getUserInfo();
    
    
    

    },
    
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '进货'
        
        this.editForm.gid = row.gid
        this.editForm.gname = row.gname
        this.editForm.brand = row.brand
        this.editForm.color = row.color
        this.editForm.size =row.size
        this.editForm.crowd =row.crowd
        this.editForm.price = row.price
        this.editForm.count = ''
        this.number=row.count
      } else {
        this.title = '上新'
        this.editForm.gid = ''
        this.editForm.gname = ''
        this.editForm.brand = ''
        this.editForm.color = ''
        this.editForm.size = ''
        this.editForm.crowd = ''
        this.editForm.price = ''
        this.editForm.count = ''

      }
    },
    // 编辑、添加提交方法
    submitForm(editData) {
      if(this.title=='进货'){
      //this.number=this.editForm.count-this.number
      this.$axios.post('http://172.23.241.44:8080/admin/goods/stock?gid='+this.editForm.gid+'&count='+this.editForm.count,{
    })
  
    this.editFormVisible = false;
    this.getUserInfo();
    this.getUserInfo();
    this.getUserInfo();
      }else{
      //上新的先不写
      }
    },

    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'edit') {
        this.editFormVisible = false
      } else if (dialog == 'perm') {
        this.dataAccessshow = false
      } else if (dialog == 'unit') {
        this.unitAccessshow = false
      }
    },

    searchUserinfo(keyUser) {
        return this.tableData.filter((user) => {
            if(user.gname.includes(keyUser)) {
                return user
            }
        })
    }
  }  
}
</script>

<style scoped>
.user-search {
  margin-top: 30px;
}
.userRole {
  width: 100%;
}
.table{
  margin-top: 40px;
  width:fit-content;
  border-width: 2px;
}

.showclass{
  height: 100%
}
.content{
  margin-left: 20px;
  display: flex;
}
.detail{
  margin-top: 30px;
}
</style>



